<template>
  <view :data-theme="theme()" :class="theme() || ''" class="pb60">
    <view class="form-box mb20">
      <view class="d-b-c form-item" style="border: none">
        <view class="f30 form-name">
          <text class="dominant mr10">*</text>
          商品名称
        </view>
        <view class="form-content">
          <text class="f24 gray9 ml20">{{
            form.productName.length + "/" + 60
          }}</text>
        </view>
      </view>
      <input
        class="form-input flex-1 pb20 border-b"
        type="text"
        placeholder-class="gray9"
        placeholder="例如:【五双装】韩版复古女袜"
        v-model="form.productName"
      />
      <view class="d-b-c form-item" style="border: none">
        <view class="f30 form-name">
          <text class="dominant mr10">*</text>
          商品图片
        </view>
      </view>
      <view class="img-list">
        <view
          class="img-upload"
          v-for="(item, index) in form.image"
          :key="index"
        >
          <image :src="item.filePath" mode="aspectFit"></image>
          <view
            class="close-btn icon iconfont icon-guanbi theme-btn"
            @click="deleteImg('image', index)"
          >
          </view>
        </view>
        <view class="img-upload" @click="openUpload('image')">
          <text class="icon iconfont icon-31paishe"></text>
          <text class="f24 gray9">商品图片</text>
        </view>
      </view>
      <view
        class="d-b-c form-item"
        style="border-bottom: none; border-top: 1rpx solid #eee"
      >
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          商品视频
        </view>
      </view>
      <view class="img-list">
        <view
          v-if="!form.videoId"
          class="img-upload"
          @click="openUpload('video', true)"
        >
          <text class="icon iconfont icon-shangchuanshipin"></text>
          <text class="f24 gray9">商品视频</text>
        </view>
        <view class="img-upload" v-if="form.videoId">
          <video :src="form.video.filePath"></video>
          <view
            class="close-btn icon iconfont icon-guanbi theme-btn"
            @click="deleteImg('video')"
          ></view>
        </view>
        <view
          class="img-upload"
          v-if="!form.posterId"
          @click="openUpload('poster')"
        >
          <text class="icon iconfont icon-31paishe"></text>
          <text class="f24 gray9">视频封面</text>
        </view>
        <view class="img-upload" v-if="form.posterId">
          <image :src="form.poster.filePath" mode="aspectFit"></image>
          <view
            class="close-btn icon iconfont icon-guanbi theme-btn"
            @click="deleteImg('poster')"
          ></view>
        </view>
      </view>
      <picker
        :range="category"
        range-key="name"
        @change="changeType($event, 'category')"
      >
        <view
          class="d-b-c form-item"
          style="border-bottom: 1rpx solid #eee; border-top: 1rpx solid #eee"
        >
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            商品分类
          </view>
          <view class="d-e-c flex-1 form-content">
            <view class="gray9 f30">{{
              categoryIndex == -1 ? "请选择" : category[categoryIndex].name
            }}</view>
            <text class="icon iconfont icon-jiantou"></text>
          </view>
        </view>
      </picker>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          销售状态
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.productStatus = 10">
            <view
              class="radio-group"
              :class="{ active: form.productStatus == 10 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">立即上架</view>
          </view>
          <view class="d-c-c ml20" @click="form.productStatus = 20">
            <view
              class="radio-group"
              :class="{ active: form.productStatus == 20 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">放入仓库</view>
          </view>
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          商品卖点
        </view>
        <view
          class="d-e-c flex-1 form-content"
          @click="openTextarea('sellingPoint', '商品卖点')"
        >
          <view class="f30 gray9 text-ellipsis ml30">{{
            form.sellingPoint || "未编辑"
          }}</view>
          <text class="icon iconfont icon-jiantou"></text>
        </view>
      </view>
    </view>
    <view class="form-box mb20">
      <view class="d-b-c form-item">
        <view class="f30 form-name fb">
          <text class="white mr10">*</text>
          其他设置
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          商品属性
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.isVirtual = 0">
            <view class="radio-group" :class="{ active: form.isVirtual == 0 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">实物商品</view>
          </view>
          <view class="d-c-c ml20" @click="form.isVirtual = 1">
            <view class="radio-group" :class="{ active: form.isVirtual == 1 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">虚拟商品</view>
          </view>
        </view>
      </view>
      <!--			<view class="d-b-c form-item" v-if="form.isVirtual == 0">-->
      <!--				<view class="f30 form-name">-->
      <!--					<text class="white mr10">*</text>-->
      <!--					运费-->
      <!--				</view>-->
      <!--				<view class="d-e-c flex-1 form-content">-->
      <!--					<view class="d-c-c ml20" @click="form.isDeliveryFree = 0">-->
      <!--						<view class="radio-group" :class="{ active: form.isDeliveryFree == 0 }"><text class="icon iconfont icon-tijiaochenggong"></text></view>-->
      <!--						<view class="gray9 f30">包邮</view>-->
      <!--					</view>-->
      <!--					<view class="d-c-c ml20" @click="form.isDeliveryFree = 1">-->
      <!--						<view class="radio-group" :class="{ active: form.isDeliveryFree == 1 }"><text class="icon iconfont icon-tijiaochenggong"></text></view>-->
      <!--						<view class="gray9 f30">运费模板</view>-->
      <!--					</view>-->
      <!--				</view>-->
      <!--			</view>-->
      <picker
        v-if="form.isVirtual == 0 && form.isDeliveryFree == 1"
        :range="delivery"
        range-key="name"
        @change="changeType($event, 'delivery')"
      >
        <view class="d-b-c form-item" style="border-bottom: 1rpx solid #eee">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            运费模板
          </view>
          <view class="d-e-c flex-1 form-content">
            <view class="gray9 f30">{{
              deliveryIndex == -1 ? "请选择" : delivery[deliveryIndex].name
            }}</view>
            <text class="icon iconfont icon-jiantou"></text>
          </view>
        </view>
      </picker>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="dominant mr10">*</text>
          商品排序
        </view>
        <view class="d-b-c flex-1 form-content">
          <input
            class="form-input flex-1"
            placeholder-class="gray9"
            placeholder="请输入"
            type="number"
            v-model="form.productSort"
          />
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="dominant mr10">*</text>
          限购数量
        </view>
        <view class="d-b-c flex-1 form-content">
          <input
            class="form-input flex-1"
            placeholder-class="gray9"
            placeholder="请输入"
            type="number"
            v-model="form.limitNum"
          />
        </view>
      </view>
      <view class="f24 gray9 form-item">每个会员购买的最大数量，0为不限购</view>
      <view class="d-b-c form-item" v-if="form.isVirtual == 1">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          发货类型
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.virtualAuto = 1">
            <view class="radio-group" :class="{ active: form.virtualAuto == 1 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">自动</view>
          </view>
          <view class="d-c-c ml20" @click="form.virtualAuto = 0">
            <view class="radio-group" :class="{ active: form.virtualAuto == 0 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">手动</view>
          </view>
        </view>
      </view>
      <view class="d-b-c form-item" v-if="form.isVirtual == 1">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          虚拟内容
        </view>
        <view
          class="d-e-c flex-1 form-content"
          @click="openTextarea('virtualContent', '虚拟内容')"
        >
          <view class="f30 gray9 text-ellipsis ml30">{{
            form.virtualContent || "未编辑"
          }}</view>
          <text class="icon iconfont icon-jiantou"></text>
        </view>
      </view>
    </view>
    <view class="form-box mb20">
      <view class="d-b-c form-item">
        <view class="f30 form-name fb">
          <text class="white mr10">*</text>
          规格/库存
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          库存计算方式
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.deductStockType = 10">
            <view
              class="radio-group"
              :class="{ active: form.deductStockType == 10 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">下单减库存</view>
          </view>
          <view class="d-c-c ml20" @click="form.deductStockType = 20">
            <view
              class="radio-group"
              :class="{ active: form.deductStockType == 20 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">付款减库存</view>
          </view>
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          产品规格
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.specType = 10">
            <view class="radio-group" :class="{ active: form.specType == 10 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">单规格</view>
          </view>
          <view class="d-c-c ml20" @click="form.specType = 20">
            <view class="radio-group" :class="{ active: form.specType == 20 }"
              ><text class="icon iconfont icon-tijiaochenggong"></text
            ></view>
            <view class="gray9 f30">多规格</view>
          </view>
        </view>
      </view>
      <!-- 单规格 -->
      <template v-if="form.specType == 10">
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            产品编码
          </view>
          <view class="d-b-c flex-1 form-content">
            <input
              class="form-input flex-1"
              placeholder-class="gray9"
              placeholder="请输入"
              type="text"
              v-model="formSku.productNo"
            />
          </view>
        </view>
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            产品价格
          </view>
          <view class="d-b-c flex-1 form-content">
            <input
              class="form-input flex-1"
              placeholder-class="gray9"
              placeholder="请输入"
              type="digit"
              v-model="formSku.productPrice"
            />
          </view>
        </view>
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            产品划线价
          </view>
          <view class="d-b-c flex-1 form-content">
            <input
              class="form-input flex-1"
              placeholder-class="gray9"
              placeholder="请输入"
              type="digit"
              v-model="formSku.linePrice"
            />
          </view>
        </view>
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            库存数量
          </view>
          <view class="d-b-c flex-1 form-content">
            <input
              class="form-input flex-1"
              placeholder-class="gray9"
              placeholder="请输入"
              type="number"
              v-model="formSku.stockNum"
            />
          </view>
        </view>
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            商品重量(Kg)
          </view>
          <view class="d-b-c flex-1 form-content">
            <input
              class="form-input flex-1"
              placeholder-class="gray9"
              placeholder="请输入"
              type="digit"
              v-model="formSku.productWeight"
            />
          </view>
        </view>
      </template>
      <template v-if="form.specType == 20">
        <view class="d-e-c p-20-0">
          <button
            v-if="form.specMany && form.specMany.specAttr.length <= 1"
            class="theme-btn small-btn"
            @click="addSpec"
          >
            +添加规格
          </button>
          <button
            v-if="form.specMany && form.specMany.specAttr.length > 1"
            class="btn-gray small-btn"
            disabled
          >
            +添加规格
          </button>
        </view>
        <template v-if="form.specMany && form.specMany.specAttr">
          <view
            class="specAttr-groups"
            v-for="(item, index) in form.specMany.specAttr"
            :key="index"
          >
            <view class="d-b-s mb20">
              <view class="f30 gray6">{{ item.groupName }}</view>
              <text
                class="icon iconfont icon-lajitong"
                @click="deleteSpec(index)"
              ></text>
            </view>
            <view class="spec_values">
              <view
                class="spec_value pr"
                v-for="(aitem, aindex) in item.specItems"
                :key="aindex"
              >
                <text>{{ aitem.specValue }}</text>
                <view
                  class="close-btn icon iconfont icon-guanbi"
                  @click="deleteSpecValue(index, aindex)"
                ></view>
              </view>
            </view>
            <view
              class="d-b-c flex-1 form-content"
              v-if="item.specItems.length <= 1"
            >
              <input
                class="form-input border-input flex-1"
                placeholder-class="gray9"
                placeholder="请输入"
                type="text"
                v-model="specValuesList[index]"
              />
              <button class="theme-btn small-btn" @click="addApecValue(index)">
                +添加
              </button>
            </view>
          </view>
          <view class="d-b-c form-item" @click="openMany">
            <view class="f30 form-name">
              <text class="white mr10">*</text>
              规格明细
            </view>
            <view class="d-e-c flex-1 form-content"
              ><text class="icon iconfont icon-jiantou"></text
            ></view>
          </view>
        </template>
      </template>
    </view>
    <view class="form-box">
      <view class="d-b-c form-item" @click="isContent = true">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          商品详情
        </view>
        <view class="d-e-c flex-1 form-content"
          ><text class="icon iconfont icon-jiantou"></text
        ></view>
      </view>
      <view class="d-b-c form-item" @click="isAdvanced = true">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          高级设置
        </view>
        <view class="d-e-c flex-1 form-content"
          ><text class="icon iconfont icon-jiantou"></text
        ></view>
      </view>
    </view>
    <button class="btn-normal theme-btn" @click="submitFunc">提交</button>
    <view v-if="showPop">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top">
          <text
            class="icon iconfont icon-guanbi"
            @click="closeFunc(null)"
          ></text>
          <view class="pop-title">{{ title || "标题" }}</view>
          <view class="input-box d-c-c">
            <textarea
              class="textarea-box"
              v-model="popValue"
              placeholder="请输入..."
              placeholder-class="gray9"
            ></textarea>
          </view>
        </view>
        <view class="border-t ww100 d-b-c" style="height: 89rpx">
          <view
            class="border-r fb d-c-c flex-1 f28 gray3 hh100"
            @click="closeFunc(null)"
            >取消</view
          >
          <view
            class="d-c-c flex-1 f28 dominant fb hh100"
            @click="closeFunc(true)"
            >确认</view
          >
        </view>
      </view>
    </view>
    <view v-if="isSpec">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top">
          <text
            class="icon iconfont icon-guanbi"
            @click="closeSpec(null)"
          ></text>
          <view class="pop-title tc" style="font-weight: normal">添加规格</view>
          <view class="pop-title">规格名</view>
          <view class="input-box-old d-c-c"
            ><input
              placeholder="请输入"
              class="input-pop"
              type="text"
              v-model="specName"
          /></view>
          <view class="pop-title">规格值</view>
          <view class="input-box-old d-c-c"
            ><input
              placeholder="请输入"
              class="input-pop"
              type="text"
              v-model="specValue"
          /></view>
        </view>
        <view class="border-t ww100 d-b-c" style="height: 89rpx">
          <view
            class="border-r fb d-c-c flex-1 f28 gray3 hh100"
            @click="closeSpec(null)"
            >取消</view
          >
          <view
            class="d-c-c flex-1 f28 dominant fb hh100"
            @click="closeSpec(true)"
            >确认</view
          >
        </view>
      </view>
    </view>
    <view v-if="isContent">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top">
          <text
            class="icon iconfont icon-guanbi"
            @click="closeContent(null)"
          ></text>
          <view class="pop-title">商品详情</view>
          <view class="d-b-c form-item">
            <view class="f30 form-name">详情类型</view>
            <view class="d-e-c flex-1 form-content">
              <view class="d-c-c ml20" @click="form.isPicture = 1">
                <view
                  class="radio-group"
                  :class="{ active: form.isPicture == 1 }"
                  ><text class="icon iconfont icon-tijiaochenggong"></text
                ></view>
                <view class="gray9 f30">纯图</view>
              </view>
              <view class="d-c-c ml20" @click="form.isPicture = 0">
                <view
                  class="radio-group"
                  :class="{ active: form.isPicture == 0 }"
                  ><text class="icon iconfont icon-tijiaochenggong"></text
                ></view>
                <view class="gray9 f30">图文</view>
              </view>
            </view>
          </view>
          <view class="d-b-c form-item" style="border: none">
            <view class="f30 form-name">详情内容</view>
          </view>
          <view class="img-list" v-if="form.isPicture == 1">
            <view
              class="img-upload"
              v-for="(item, index) in form.contentImage"
              :key="index"
            >
              <image :src="item.filePath" mode="aspectFit"></image>
              <view
                class="close-btn icon iconfont icon-guanbi theme-btn"
                @click="deleteImg('contentImage', index)"
              ></view>
            </view>
            <view class="img-upload" @click="openUpload('contentImage')">
              <text class="icon iconfont icon-31paishe"></text>
              <text class="f24 gray9">详情图片</text>
            </view>
          </view>
          <view class="f24 gray9 form-item" v-else
            >图文详细请前往PC端进行编辑</view
          >
        </view>
        <view class="border-t ww100 d-b-c" style="height: 89rpx">
          <view
            class="border-r fb d-c-c flex-1 f28 gray3 hh100"
            @click="closeContent(null)"
            >取消</view
          >
          <view
            class="d-c-c flex-1 f28 dominant fb hh100"
            @click="closeContent(true)"
            >确认</view
          >
        </view>
      </view>
    </view>
    <view v-if="isAdvanced">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top">
          <text
            class="icon iconfont icon-guanbi"
            @click="closeAdvanced(null)"
          ></text>
          <view class="pop-title tc" style="font-weight: normal">高级设置</view>
          <view class="pop-title-h">积分设置</view>
          <view class="d-b-c form-item">
            <view class="f30 form-name">是否开启积分赠送</view>
            <view class="d-e-c flex-1 form-content">
              <switch
                @change="switchChange($event, 'isPointsGift')"
                :checked="form.isPointsGift == 1"
                :color="getThemeColor()"
                style="transform: scale(0.5)"
              />
            </view>
          </view>
          <view class="d-b-c form-item">
            <view class="f30 form-name">是否允许使用积分抵扣</view>
            <view class="d-e-c flex-1 form-content">
              <switch
                @change="switchChange($event, 'isPointsDiscount')"
                :checked="form.isPointsDiscount == 1"
                :color="getThemeColor()"
                style="transform: scale(0.5)"
              />
            </view>
          </view>
          <template v-if="form.isPointsDiscount == 1">
            <view class="d-b-c form-item" style="border: none">
              <view class="f30 form-name">最大抵扣积分数量</view>
              <view class="d-b-c flex-1 form-content">
                <input
                  class="form-input flex-1"
                  placeholder-class="gray9"
                  placeholder="请输入"
                  type="digit"
                  v-model="form.maxPointsDiscount"
                />
              </view>
            </view>
            <view class="f24 gray9 form-name"
              >最大抵扣积分数量，-1为使用通用设置</view
            >
          </template>

          <view class="pop-title-h mt30">分销设置</view>
          <view class="d-b-c form-item">
            <view class="f30 form-name">是否开启分销</view>
            <view class="d-e-c flex-1 form-content">
              <switch
                @change="switchChange($event, 'isAgent')"
                :checked="form.isAgent == 1"
                :color="getThemeColor()"
                style="transform: scale(0.5)"
              />
            </view>
          </view>
        </view>
        <view class="border-t ww100 d-b-c" style="height: 89rpx">
          <view
            class="border-r fb d-c-c flex-1 f28 gray3 hh100"
            @click="closeAdvanced(null)"
            >取消</view
          >
          <view
            class="d-c-c flex-1 f28 dominant fb hh100"
            @click="closeAdvanced(true)"
            >确认</view
          >
        </view>
      </view>
    </view>
    <view v-if="isMany">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top pb20">
          <text
            class="icon iconfont icon-guanbi"
            @click="closeMany(null)"
          ></text>
          <view
            class="pop-title tc"
            style="font-weight: normal; margin-bottom: 0"
            >规格明细</view
          >
          <view class="pop-spec-list">
            <view
              class="pop-spec-item pr"
              :class="{ active: activeSpec == index }"
              @click="activeSpec = index"
              v-for="(item, index) in form.specMany.specList"
              :key="index"
            >
              {{ getSpecName(item.specSkuId) }}
            </view>
          </view>
          <view
            class="p-20-0 pop-spec-item-detail"
            :class="{ closebox: activeSpec != index }"
            v-for="(item, index) in form.specMany.specList"
            :key="index"
          >
            <view class="d-b-c flex-1 form-content mb20">
              <view class="f24 form-name">产品编码</view>
              <input
                class="form-input border-input flex-1"
                placeholder-class="gray9"
                placeholder="输入产品编码"
                type="text"
                v-model="item.specForm.productNo"
              />
            </view>
            <view class="d-b-c flex-1 form-content mb20">
              <view class="f24 form-name">销售价</view>
              <input
                class="form-input border-input flex-1"
                placeholder-class="gray9"
                placeholder="输入销售价"
                type="digit"
                v-model="item.specForm.productPrice"
              />
            </view>
            <view class="d-b-c flex-1 form-content mb20">
              <view class="f24 form-name">划线价</view>
              <input
                class="form-input border-input flex-1"
                placeholder-class="gray9"
                placeholder="输入划线价"
                type="digit"
                v-model="item.specForm.linePrice"
              />
            </view>
            <view class="d-b-c flex-1 form-content mb20">
              <view class="f24 form-name">库存</view>
              <input
                class="form-input border-input flex-1"
                placeholder-class="gray9"
                placeholder="输入库存"
                type="number"
                v-model="item.specForm.stockNum"
              />
            </view>
            <view class="d-b-c flex-1 form-content">
              <view class="f24 form-name">重量(kg)</view>
              <input
                class="form-input border-input flex-1"
                placeholder-class="gray9"
                placeholder="输入重量(kg)"
                type="digit"
                v-model="item.specForm.productWeight"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 上传头像 -->
    <Upload
      v-if="isUpload"
      :num="1"
      :isVideo="isVideo"
      @getImgs="getImgsFunc"
    ></Upload>
  </view>
</template>

<script>
import Upload from "@/components/upload/upload.vue";
import rule from "./product_rule.js";
export default {
  components: {
    Upload,
  },
  data() {
    return {
      productId: 0,
      activeSpec: 0,
      form: {
        productName: "" /* 商品名称 */,
        image: [] /* 商品主图 */,
        video: {} /* 商品视频 */,
        videoId: 0 /* 商品视频ID */,
        poster: {} /* 商品视频封面 */,
        posterId: 0 /* 商品视频封面ID */,
        sellingPoint: "" /* 商品卖点 */,
        productStatus: 10 /* 销售状态 */,
        auditStatus: 0 /* 是否审核 */,
        categoryId: 0 /* 商品分类 */,
        isVirtual: 0 /* 商品属性 */,
        productSort: 0 /* 商品排序 */,
        limitNum: 0 /* 限购数量 */,
        virtualAuto: 0 /* 发货类型 */,
        virtualContent: "" /* 虚拟内容 */,
        isDeliveryFree: 1 /* 运费 */,
        deliveryId: 0 /*运费模板 */,
        isPointsGift: 0 /*是否开启积分赠送 */,
        isPointsDiscount: 0 /*是否允许使用积分抵扣 */,
        maxPointsDiscount: "" /*最大抵扣积分数量 */,
        isAgent: 0 /*是否开启分销 */,
        isPicture: 1,
        contentImage: [] /* 详情图片 */,
        deductStockType: 10 /* 库存计算方式 */,
        specType: 10 /* 产品规格 */,
        sku: {
          productNo: "" /* 产品编码 */,
          productPrice: "" /* 产品价格 */,
          linePrice: "" /* 产品划线价 */,
          stockNum: "" /* 库存数量 */,
          productWeight: "" /* 商品重量 */,
        },
        specMany: {
          specAttr: [],
          specList: [],
        },
      },
      delivery: [],
      deliveryIndex: -1,
      category: [],
      categoryIndex: -1,
      title: "" /* 文本域弹窗标题 */,
      textType: "" /* 文本域弹窗类型 */,
      showPop: false /* 文本域弹窗 */,
      isContent: false,
      isAdvanced: false,
      isSpec: false,
      specValue: "",
      specName: "",
      popValue: "",
      fileType: "",
      uploadType: "",
      isUpload: "",
      isVideo: false,
      specValuesList: [],
      isMany: false,
    };
  },
  onLoad(e) {
    this.productId = e.productId || 0;
    this.getData();
  },
  computed: {
    formSku() {
      return this.form.sku || {};
    },
  },
  methods: {
    deleteSpec(i) {
      let self = this;
      uni.showModal({
        title: "提示",
        content: "确认要删除吗?",
        success(e) {
          if (e.confirm) {
            self.form.specMany.specAttr.splice(i, 1);
          }
        },
      });
    },
    deleteSpecValue(i, ci) {
      let self = this;
      uni.showModal({
        title: "提示",
        content: "确认要删除吗?",
        success(e) {
          if (e.confirm) {
            self.form.specMany.specAttr[i].specItems.splice(ci, 1);
          }
        },
      });
    },
    addApecValue(i) {
      let self = this;
      let specValue = this.specValuesList[i];
      if (!specValue) {
        uni.showToast({
          title: "请输入规格值",
          icon: "none",
        });
        return;
      }
      self._post(
        "supplier/spec/addSpecValue",
        {
          specId: self.form.specMany.specAttr[i].groupId,
          specValue: specValue,
        },
        (res) => {
          // 记录规格数据
          self.form.specMany.specAttr[i].specItems.push({
            itemId: res.data.specValueId,
            specValue: specValue,
          });
          self.specValuesList[i] = "";
        },
        (fail) => {
          self.specValuesList[i] = "";
        }
      );
    },
    addSpec() {
      let self = this;
      self.isSpec = true;
    },
    getData() {
      let self = this;
      let url = "supplier/product/add";
      let params = {};
      if (self.productId) {
        url = "supplier/product/edit";
        params.productId = self.productId;
      }
      self._get(url, params, (res) => {
        let arr = [];
        let category = [];
        category = res.data.category;
        if (category.length > 0) {
          category.forEach((item, index) => {
            arr.push({
              name: item.name,
              categoryId: item.categoryId,
            });
            if (item.child && item.child.length > 0) {
              item.child.forEach((citem, cindex) => {
                arr.push({
                  name: item.name + "—" + citem.name,
                  categoryId: citem.categoryId,
                });
              });
            }
          });
        }
        self.category = arr;
        self.delivery = res.data.delivery;
        if (self.productId) {
          Object.assign(self.form, res.data.model);
          self.form.productStatus = res.data.model.productStatus.value;
          if (res.data.specData) {
            self.$set(self.form, "specMany", res.data.specData);
          } else {
            self.$set(self.form, "specMany", {
              specAttr: [],
              specList: [],
            });
            self.form.sku = res.data.model.sku[0];
          }
          if (self.form.deliveryId == 0) {
            self.$set(self.form, "isDeliveryFree", 0);
          } else {
            self.$set(self.form, "isDeliveryFree", 1);
          }
          //修改时审核状态
          if (
            res.data.auditSetting &&
            res.data.auditSetting.editAudit == 1 &&
            self.productId
          ) {
            self.form.auditStatus = 0;
          }
          self.category.forEach((item, index) => {
            if (item.categoryId == self.form.categoryId) {
              self.categoryIndex = index;
              return;
            }
          });
          self.delivery.forEach((item, index) => {
            if (item.deliveryId == self.form.deliveryId) {
              self.deliveryIndex = index;
              return;
            }
          });
          console.log(self.deliveryIndex);
        }
      });
    },
    submitFunc() {
      let self = this;
      let params = self.form;
      if (self.categoryIndex != -1) {
        params.categoryId = self.category[self.categoryIndex].categoryId;
      } else {
        uni.showToast({
          title: "请选择商品分类",
          icon: "none",
        });
        return;
      }

      let flag = rule.validate(params);
      if (flag) {
        let url = "supplier/product/add";
        let param = params;
        let skus = this.formSku;
        if (self.productId) {
          url = "supplier/product/edit";
          param.productId = self.productId;
        }
        param.sku = skus;
        self._postBody(url, param, (res) => {
          uni.showModal({
            title: "提示",
            content: res.msg,
            success() {
              uni.navigateBack();
            },
          });
        });
      }
      console.log(flag);
    },
    openTextarea(name, title) {
      this.title = title;
      this.textType = name;
      this.popValue = this.form[name];
      this.showPop = true;
    },
    changeType(e, name) {
      this[name + "Index"] = e.detail.value;
      this.form[name + "Id"] = this[name][this[name + "Index"]].deliveryId;
    },
    closeFunc(e) {
      if (e) {
        this.form[this.textType] = this.popValue;
      }
      this.popValue = "";
      this.title = "";
      this.showPop = false;
    },
    closeSpec(e) {
      let self = this;
      if (e) {
        if (self.specName === "" || self.specValue === "") {
          uni.showToast({
            title: "请填写规则名或规则值",
            icon: "none",
          });
          return false;
        }
        self._post(
          "supplier/spec/addSpec",
          {
            specName: self.specName,
            specValue: self.specValue,
          },
          (res) => {
            // 记录规格数据
            self.form.specMany.specAttr.push({
              groupId: res.data.specId,
              groupName: self.specName,
              specItems: [
                {
                  itemId: res.data.specValueId,
                  specValue: self.specValue,
                },
              ],
              tempValue: "",
              loading: false,
            });

            self.specValue = "";
            self.specName = "";
          },
          (fail) => {
            self.specValue = "";
            self.specName = "";
          }
        );
      }
      this.isSpec = false;
    },
    closeContent(e) {
      if (e) {
      }
      this.isContent = false;
    },
    closeMany(e) {
      this.isMany = false;
    },
    closeAdvanced(e) {
      if (e) {
      }
      this.isAdvanced = false;
    },
    switchChange(e, name) {
      this.form[name] = e.detail.value ? 1 : 0;
    },
    deleteImg(name, n) {
      let self = this;
      uni.showModal({
        title: "提示",
        content: "确定要删除吗?",
        success(e) {
          if (e.confirm) {
            if (n >= 0) {
              let arr = self.form[name];
              arr.splice(n, 1);
            } else {
              self.form[name] = {};
              self.form[name + "Id"] = 0;
            }
          }
        },
      });
    },
    /*获取上传的图片*/
    getImgsFunc(e) {
      let self = this;
      self.isUpload = false;
      if (e && typeof e != "undefined") {
        if (self.uploadType == "poster") {
          self.form.posterId = e[0].fileId;
          self.form[self.uploadType] = e[0];
        } else if (self.uploadType == "video") {
          self.form.videoId = e[0].fileId;
          self.form[self.uploadType] = e[0];
        } else if (self.uploadType != "poster") {
          self.form[self.uploadType].push(e[0]);
        } else {
          self.form[self.uploadType] = e[0];
        }
      }
    },
    /*打开上传图片*/
    openUpload(type, fileType) {
      this.uploadType = type;
      this.isVideo = fileType || false;
      this.isUpload = true;
    },
    clearImage(name, n) {
      if (n) {
        this.form[name].splice(n, 1);
      } else {
        this.form[name] = "";
      }
    },

    openMany() {
      this.buildSkulist();
      this.isMany = true;
    },
    /*构建规格组合列表*/
    buildSkulist: function () {
      let self = this;
      let specAttr = self.form.specMany.specAttr;
      let specArr = [];
      for (let i = 0; i < specAttr.length; i++) {
        specArr.push(specAttr[i].specItems);
      }

      let specListTemp = self.calcDescartes(specArr);

      let specList = [];
      for (let i = 0; i < specListTemp.length; i++) {
        let rows = [];
        let specSkuIdAttr = [];
        if (!Array.isArray(specListTemp[i])) {
          rows.push(specListTemp[i]);
        } else {
          rows = specListTemp[i];
        }
        for (let j = 0; j < rows.length; j++) {
          specSkuIdAttr.push(rows[j].itemId);
        }
        specList.push({
          productSkuId: 0,
          specSkuId: specSkuIdAttr.join("_"),
          rows: rows,
          specForm: {
            productNo: "",
            productPrice: "",
            linePrice: "",
            stockNum: "",
            productWeight: "",
          },
        });
      }

      // 合并旧sku数据
      if (self.form.specMany.specList.length > 0 && specList.length > 0) {
        for (let i = 0; i < specList.length; i++) {
          let overlap = self.form.specMany.specList.filter(function (val) {
            return val.specSkuId === specList[i].specSkuId;
          });
          if (overlap.length > 0) {
            specList[i].specForm = overlap[0].specForm;
            specList[i].productSkuId = overlap[0].productSkuId;
          }
        }
      }

      self.form.specMany.specList = specList;
    },
    /*规格组合*/
    calcDescartes: function (array) {
      if (array.length < 2) return array[0] || [];
      return [].reduce.call(array, function (col, set) {
        let res = [];
        col.forEach(function (c) {
          set.forEach(function (s) {
            let t = [].concat(Array.isArray(c) ? c : [c]);
            t.push(s);
            res.push(t);
          });
        });
        return res;
      });
    },
    getSpecName(id) {
      let self = this;
      console.log("11", id);
      let list = id.split("_");
      let name = [];
      let specAttr = self.form.specMany.specAttr;
      list.forEach((item, index) => {
        specAttr.forEach((aitem, aindex) => {
          aitem.specItems.forEach((sitem, sindex) => {
            if (item == sitem.itemId) {
              name.push(sitem.specValue);
            }
          });
        });
      });
      return name.join("/");
    },
  },
};
</script>

<style lang="scss">
.textarea-box {
  width: 100%;
  border: 2rpx solid #eee;
  border-radius: 5rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #575757;
  padding: 26rpx;
  box-sizing: border-box;
}
.border-input {
  width: 484rpx;
  height: 68rpx;
  background: #ffffff;
  border: 1rpx solid #eeeeee;
  border-radius: 10rpx;
  padding: 0 15rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}
.form-box {
  padding: 0 30rpx;
  background-color: #fff;
}
.pop-spec-item-detail {
  .form-name {
    margin-right: 20rpx;
    width: 120rpx;
  }
  .form-input {
    font-size: 24rpx;
    padding-left: 20rpx;
  }
}
.pop-spec-item-detail.closebox {
  display: none;
}
.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  .form-name {
    margin-right: 20rpx;
  }
  .form-content {
    .form-input {
      text-align: right;
    }

    .icon-jiantou {
      font-size: 28rpx;
      color: #999;
      margin-left: 20rpx;
    }
    .radio-group {
      width: 46rpx;
      height: 46rpx;
      box-sizing: border-box;
      background: #ffffff;
      border: 1rpx solid #eeeeee;
      border-radius: 50%;
      margin-right: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-tijiaochenggong {
        display: none;
        font-size: 26rpx;
        font-weight: bold;
      }
    }
    .active {
      @include background_color("background_color");
      .icon-tijiaochenggong {
        display: block;
        color: #fff;
      }
    }
  }
}
.form-item:last-child {
  border: none;
}
.img-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .img-upload {
    width: 170rpx;
    height: 160rpx;
    flex-shrink: 0;
    border: 2rpx solid #eeeeee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
    .close-btn.icon {
      width: 38rpx;
      height: 38rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      z-index: 1;
      font-size: 24rpx;
      border-radius: 50%;
    }
    video,
    image {
      width: 170rpx;
      height: 160rpx;
    }
    .icon-31paishe,
    .icon-shangchuanshipin {
      font-size: 58rpx;
      color: #333;
      margin-bottom: 12rpx;
    }
  }
}
.pop-bg {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.65);
}
.icon.icon-guanbi {
  font-size: 32rpx;
  color: #999;
  position: absolute;
  right: 25rpx;
  top: 22rpx;
  z-index: 101;
}
.pop-input {
  width: 665rpx;
  // height: 290rpx;
  background: #ffffff;
  border-radius: 25rpx;
  position: fixed;
  left: 0;
  right: 0;
  top: 20%;
  // bottom: 0;
  margin: auto;
  z-index: 100;
  .form-item {
    padding: 20rpx 0;
  }
}
.pop-top {
  padding: 40rpx 60rpx 0 60rpx;
  box-sizing: border-box;
}
.pop-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 22rpx;
}
.pop-title-h {
  font-size: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  padding-left: 17rpx;
  color: #333;
  font-weight: bold;
  border-left: 6rpx solid;
  @include border_color("border_color");
}
.input-box-old {
  width: 542rpx;
  height: 64rpx;
  background: #ffffff;
  border: 1rpx solid #dddddd;
  border-radius: 32rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 20rpx;
}
.input-box {
  // width: 542rpx;
  // height: 64rpx;
  // background: #ffffff;
  // border: 1rpx solid #dddddd;
  // border-radius: 32rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 20rpx;
}
.input-pop {
  box-sizing: border-box;
  border-radius: 32rpx;
  line-height: 1.5;
  font-size: 28rpx;
  color: #333;
  padding: 0 25rpx;
  border: none;
  flex: 1;
  outline-offset: 0;
}
.img-upload::v-deep .uni-video-bar {
  height: 40rpx;
  padding: 0 20rpx;
}
.img-upload::v-deep .uni-video-cover-play-button {
  width: 40rpx;
  height: 40rpx;
}

.img-upload::v-deep .uni-video-cover-duration {
  font-size: 22rpx;
}
.img-upload::v-deep .uni-video-fullscreen {
  padding: 0;
  width: 30rpx;
  height: 30rpx;
}
.img-upload::v-deep .uni-video-control-button {
  padding: 0;
  width: 14rpx;
  height: 14rpx;
}
.img-upload::v-deep .uni-video-current-time {
  display: none;
}
.img-upload::v-deep .uni-video-progress-container {
  display: none;
}
.img-upload::v-deep .uni-video-duration {
  display: none;
}
.btn-normal {
  width: 90%;
  margin: 60rpx auto;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small-btn {
  height: 68rpx;
  line-height: 68rpx;
  border-radius: 34rpx;
  background: #ff5800;
  @include background_color("background_color");
  border-radius: 34rpx;
  font-size: 26rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 33rpx;
}
button.btn-gray.small-btn {
  background: #cccccc !important;
  color: #ffffff !important;
}
.specAttr-groups {
  width: 690rpx;
  padding: 30rpx;
  box-sizing: border-box;
  border: 1px solid;
  @include border_color("border_color");
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  .icon-lajitong {
    font-size: 30rpx;
    color: #666;
    margin-left: 20rpx;
  }
  .spec_values {
    .spec_value {
      padding: 0 25rpx;
      min-width: 146rpx;
      background: #fff2eb;
      border: 1rpx solid;
      @include border_color("border_color");
      border-radius: 10rpx;
      font-size: 24rpx;
      @include font_color("font_color");
      margin-right: 50rpx;
      margin-bottom: 20rpx;
      display: inline-block;
      flex-shrink: 0;
      line-height: 56rpx;
      text-align: center;
      .close-btn.icon {
        width: 38rpx;
        height: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        z-index: 1;
        font-size: 24rpx;
        border-radius: 50%;
        background: #000000;
        color: #fff;
      }
    }
  }
}
.pop-spec-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1rpx solid #eee;
  box-sizing: border-box;
  .pop-spec-item {
    padding: 23rpx 0;
    font-size: 26rpx;
    color: #333;
    margin-right: 40rpx;
    flex-shrink: 0;
  }
  .pop-spec-item.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    width: 96%;
    height: 6rpx;
    border-radius: 4rpx;
    @include background_color("background_color");
  }
}
</style>
